﻿@using KuaJing.Tasks.Domain
@using Inovout.Descriptor
@using Inovout
@model IEnumerable<KuaJing.Tasks.Domain.Task>
<div class="row">
    <div class="col-xs-4">
        请选择统计日期：
        @Html.TextBox("currentDate", (string)ViewBag.CurrentDate, new { type = "date", data_url = Url.Action("Daily") })
    </div>
    @{
        var currentYearChart = ViewBag.CuurentYearChart as OrderStatistics<DateTime>;
    }
    <div class="col-xs-8">
        <div class="row">
            <div class="col-xs-4">
                累计订单金额：@Math.Round(currentYearChart.OrderAmount / 10000, 2).ToString("N2") 万元
            </div>
            <div class="col-xs-4">
                最高订单金额：@Math.Round(currentYearChart.MaxAmount / 10000, 2).ToString("N2")万元
            </div>
            <div class="col-xs-4">
                最低订单金额：@Math.Round(currentYearChart.MinAmount / 10000, 2).ToString("N2")万元
            </div>
            <div class="col-xs-4">
                平均订单金额：@Math.Round(currentYearChart.AvgAmount / 10000, 2).ToString("N2")万元
            </div>
            <div class="col-xs-4">

                累计订单数量：@currentYearChart.OrderCount.ToString("N0")笔
            </div>
            <div class="col-xs-4">
                下单客户数量：@currentYearChart.CustomerCount.ToString("N0")个
            </div>
        </div>
    </div>
</div>

<div class="tabs" style="height:900px;;width:100%">
    @{
        var orderCountBarCharts = (Dictionary<DateTimeRangeKind, ChartInfo<int>>)ViewBag.OrderCountBarCharts;
        var orderCountLineCharts = (Dictionary<DateTimeRangeKind, ChartInfo<DateTimeRange, int>>)ViewBag.OrderCountLineCharts;
        var orderAmountBarCharts = (Dictionary<DateTimeRangeKind, ChartInfo<decimal>>)ViewBag.OrderAmountBarCharts;
        var orderAmountLineCharts = (Dictionary<DateTimeRangeKind, ChartInfo<DateTimeRange, decimal>>)ViewBag.OrderAmountLineCharts;
    }
    @foreach (var kind in orderCountBarCharts.Keys)
    {
        <div class="row" title="@kind.ToAlias()">
            @{
                var orderCountLineChart = orderCountLineCharts[kind];
                var orderCountPlotLines = orderCountLineChart.PlotLines;
                var orderCountBarChart = orderCountBarCharts[kind];

                var orderAmountLineChart = orderAmountLineCharts[kind];
                var orderAmountPlotLines = orderAmountLineChart.PlotLines;
                var orderAmountBarChart = orderAmountBarCharts[kind];

            }
            <div class="col-xs-8 chart">
                {
                title: {text: '订单数量 @kind.ToAlias() 报'},
                subtitle: {text: '截止于： @ViewBag.CurrentDate',align: 'right'},
                xAxis: {type: 'datetime'},
                yAxis: {
                title: {text: '数量（单位：笔）'},max:@orderCountLineChart.MaxY,min:@orderCountLineChart.MinY,
                labels: {},
                plotLines: [
                {value: @orderCountPlotLines[0].Value,width: 2,color: 'green',dashStyle:'ShortDot',label: {text: '近 @Html.Raw(kind == DateTimeRangeKind.Day ? "30天" : "3" + kind.ToAlias())最高订单数量：@orderCountPlotLines[0].Value  笔 (@orderCountPlotLines[0].Key)',style:{fontSize:"8px"}}},
                {value: @orderCountPlotLines[1].Value,width: 2,color: 'blue',dashStyle:'ShortDot', label: {text: '平均订单数量：@orderCountPlotLines[1].Value  笔',style:{fontSize:"8px"}}},
                {value: @orderCountPlotLines[2].Value,width: 2,color: 'red',dashStyle:'ShortDot', label: {text: '近 @Html.Raw(kind == DateTimeRangeKind.Day ? "30天" : "3" + kind.ToAlias())最低订单数量：@orderCountPlotLines[2].Value 笔 (@orderCountPlotLines[2].Key)',style:{fontSize:"8px"}}}
                ]},
                legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom'},
                plotOptions: {
                line: { dataLabels: { enabled: true}}
                },
                series: @Html.Raw(orderCountLineChart.Datas)
                }
            </div>

            <div class="col-xs-4 chart">
                {
                chart: {type: 'bar'},
                title: {text: '@orderCountLineChart.MaxX 按经营主体的各维度订单数量统计'},
                xAxis: [{
                categories: @Html.Raw(orderCountBarChart.YCategories),
                reversed: false,
                labels: {
                step: 1
                }
                }, {
                opposite: true,
                reversed: false,
                categories: @Html.Raw(orderCountBarChart.YCategories),
                linkedTo: 0,
                labels: {
                step: 1
                }
                }],
                yAxis: {
                title: {
                text: null
                },
                labels: {
                formatter: function () {return  Math.abs(this.value);}
                }
                },
                plotOptions: {
                bar: { dataLabels: { enabled: true,formatter: function () {
                return this.y==0?'': Math.abs(this.y);
                }}},
                series: {
                stacking: 'normal'
                }
                },
                tooltip: {
                formatter: function () {
                return '<b>' + this.series.name + ', ' + this.point.category + '</b><br />' +
                '订单数量: ' + Math.abs(this.point.y);
                }
                },

                series: @Html.Raw(orderCountBarChart.Datas)
                }
            </div>

            <div class="col-xs-8 chart">
                {
                title: {text: '订单金额 @kind.ToAlias() 报'},
                subtitle: {text: '截止于： @ViewBag.CurrentDate',align: 'right'},
                xAxis: {type: 'datetime'},
                yAxis: {
                title: {text: '金额（单位：万元）'},max:@orderAmountLineChart.MaxY,min:@orderAmountLineChart.MinY,
                labels: {formatter: function() {return Highcharts.numberFormat(this.value/10000, 0);}},
                plotLines: [
                {value: @orderAmountPlotLines[0].Value,width: 2,color: 'green',dashStyle:'ShortDot',label: {text: '近 @Html.Raw(kind == DateTimeRangeKind.Day ? "30天" : "3" + kind.ToAlias())最高订单金额：@Math.Round(orderAmountPlotLines[0].Value / 10000, 2) 万元 (@orderAmountPlotLines[0].Key)',style:{fontSize:"8px"}}},
                {value: @orderAmountPlotLines[1].Value,width: 2,color: 'blue',dashStyle:'ShortDot', label: {text: '平均订单金额：@Math.Round(orderAmountPlotLines[1].Value / 10000, 2) 万元',style:{fontSize:"8px"}}},
                {value: @orderAmountPlotLines[2].Value,width: 2,color: 'red',dashStyle:'ShortDot', label: {text: '近 @Html.Raw(kind == DateTimeRangeKind.Day ? "30天" : "3" + kind.ToAlias())最低订单金额：@Math.Round(orderAmountPlotLines[2].Value / 10000, 2) 恨元 (@orderAmountPlotLines[2].Key)',style:{fontSize:"8px"}}}
                ]},
                legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom'},
                plotOptions: {
                line: { dataLabels: { enabled: true,formatter:function() {return Highcharts.numberFormat(this.y/10000, 2);} }}
                },
                series: @Html.Raw(orderAmountLineChart.Datas)
                }
            </div>

            <div class="col-xs-4 chart">
                {
                chart: {type: 'bar'},
                title: {text: '@orderAmountLineChart.MaxX 按经营主体的各维度订单金额统计'},
                xAxis: [{
                categories: @Html.Raw(orderAmountBarChart.YCategories),
                reversed: false,
                labels: {
                step: 1
                }
                }, {
                opposite: true,
                reversed: false,
                categories: @Html.Raw(orderAmountBarChart.YCategories),
                linkedTo: 0,
                labels: {
                step: 1
                }
                }],
                yAxis: {
                title: {
                text: null
                },
                labels: {
                formatter: function () {
                return Highcharts.numberFormat(Math.abs(this.value)/10000, 0);
                }
                }
                },
                plotOptions: {
                bar: { dataLabels: { enabled: true,formatter: function() { return this.y==0?'': Highcharts.numberFormat(Math.abs(this.y)/10000, 2);}}},
                series: {
                stacking: 'normal'
                }
                },
                tooltip: {
                formatter: function () {
                return '<b>' + this.series.name + ', ' + this.point.category + '</b><br />' +
                '订单金额: ' + Highcharts.numberFormat(Math.abs(this.point.y)/10000, 2) + '万元';
                }
                },
                series: @Html.Raw(orderAmountBarChart.Datas)
                }
            </div>
        </div>                }     }
</div>
